<template>
  <div class="mainRight">
    <el-form ref="ruleForm" :model="ruleForm" label-width="80px" inline>
      <el-form-item label="发布组织:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="会议形式:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="会议类型:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="会议名称:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="会议时间:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="是否公开会议:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <div class="tableListOperator">
      <div class="leftBtns">
        <el-button
          @click="(title = '会议新增'), (dialogVisible = true)"
          type="primary"
          size="mini"
          icon="el-icon-plus"
          >新建</el-button
        >
        <el-button icon="el-icon-download" class="rightBtn" size="mini"
          >导入纪要</el-button
        >

        <el-tooltip
          class="item"
          effect="dark"
          content="导出纪要，手动选择需要导出的会议批量导出"
          placement="top"
        >
          <i class="el-icon-warning-outline"></i>
        </el-tooltip>
        <el-button icon="el-icon-download" class="rightBtn" size="mini"
          >导出台账</el-button
        >

        <el-tooltip
          class="item"
          effect="dark"
          content="导出台账，根据查询条件导出，时间必填间隔不超过1年。"
          placement="top"
        >
          <i class="el-icon-warning-outline"></i>
        </el-tooltip>
        <el-button icon="el-icon-date" class="rightBtn" size="mini"
          >图表展示</el-button
        >
      </div>
      <div class="rightBtns">
        <el-button size="mini" plain>重置</el-button>
        <el-button type="primary" size="mini">查询</el-button>
      </div>
    </div>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column type="selection" align="center" width="50">
      </el-table-column>
      <el-table-column prop="title" label="会议名称" align="center">
      </el-table-column>
      <el-table-column
        prop="orgname"
        label="发布组织"
        align="center"
        width="250"
      >
      </el-table-column>
      <el-table-column
        prop="meetingtypename"
        label="会议类型"
        align="center"
        width="250"
      >
      </el-table-column>
      <el-table-column prop="creatername" label="发起人" align="center">
      </el-table-column>
      <el-table-column label="会议日期" align="center">
        <template slot-scope="{ row }">{{
          getTime(row.starttime, 1)
        }}</template>
      </el-table-column>
      <el-table-column label="开始时间" align="center">
        <template slot-scope="{ row }">{{
          getTime(row.starttime, 2)
        }}</template>
      </el-table-column>
      <el-table-column prop="meetingway" label="会议形式" align="center">
        <template slot-scope="{ row }">{{
          row.meetingway == 1
            ? "线下会议"
            : row.meetingway == 2
            ? "直播会议"
            : ""
        }}</template>
      </el-table-column>
      <el-table-column label="会议进度" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.status ? '' : 'success'">{{
            row.status ? "已结束" : "进行中"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
            <el-button type="text" @click="handleItem(1, row)">修改</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleItem(1, row)">删除</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleItem(1, row)">更多</el-button>
         
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="ruleForm.total>0"
      :total="ruleForm.total"
      :page.sync="ruleForm.pageNum"
      :limit.sync="ruleForm.pageSize"
      @pagination="()=>{}"
    />
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1200px"
      @close="cancelForm"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        class="form"
      >
        <el-form-item label="会议名称:" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请填写会议名称"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间:" prop="starttime">
              <el-date-picker
                v-model="form.starttime"
                type="datetime"
                placeholder="请选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会议时长:" prop="durtion">
              <el-input placeholder="请填写会议时长" v-model="form.durtion">
                <template slot="append">分钟</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="发布组织:" prop="orgid">
          <treeselect
            :disabled="form.status == 1"
            v-model="form.orgid"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择发布组织"
          />
        </el-form-item>
        <el-form-item label="会议类型:" prop="meetingtype">
          <el-checkbox-group
            v-model="checkTypeList"
            @change="(e) => handleCheckedCitiesChange(e, 'meetingtype')"
          >
            <el-checkbox
              :label="item.id"
              v-for="(item, index) in conferenceTypeList"
              :key="index"
              >{{ item.typename }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="会议议题:" prop="meetingtopic">
          <el-checkbox-group
            v-model="checkIssueList"
            @change="(e) => handleCheckedCitiesChange(e, 'meetingtopic')"
          >
            <el-checkbox
              :label="item.id"
              v-for="(item, index) in issueList"
              :key="index"
              >{{ item.configname }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="会议形式:" prop="meetingway">
          <el-radio
            :disabled="form.status == 1"
            v-model="form.meetingway"
            :label="1"
            >线下会议</el-radio
          >
          <el-radio
            :disabled="form.status == 1"
            v-model="form.meetingway"
            :label="2"
            >直播会议</el-radio
          >
        </el-form-item>
        <el-form-item label="具体形式:" prop="detailway">
          <el-input
            v-model="form.detailway"
            placeholder="请填写具体形式"
          ></el-input>
        </el-form-item>
        <el-form-item label="签到方式:" prop="signway">
          <el-radio
            :disabled="form.status == 1"
            v-model="form.signway"
            :label="1"
            >位置签到</el-radio
          >
          <el-radio
            :disabled="form.status == 1"
            v-model="form.signway"
            :label="2"
            >扫码签到</el-radio
          >
          <el-radio
            :disabled="form.status == 1"
            v-model="form.signway"
            :label="3"
            >手机签到</el-radio
          >
        </el-form-item>
        <el-form-item label="会议地点:" prop="meetingaddr">
          <el-cascader
            size="large"
            clearable
            placeholder="请选择会议地点"
            @change="changeArea"
            :options="pcaTextArr"
            v-model="selectedOptions"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址:" prop="detailaddr">
          <el-input
            v-model="form.detailaddr"
            placeholder="请填写详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="参与人员:" prop="users">
          <div
            class="ov_hid"
            style="display: flex; justify-content: space-between"
          >
            <div
              class="delete-tip"
              style="color: rgba(0, 0, 0, 0.25); font-size: 14px"
            >
              点击头像即可删除
            </div>
            <div class="join-div" style="font-size: 12px">
              参会人员：<span style="color: rgba(0, 0, 0, 0.45)"
                >{{ selectUserList.length }}个</span
              >
            </div>
          </div>
        </el-form-item>
        <el-form-item label="">
          <div class="person-select">
            <div
              class="default-addbtn"
              v-for="(item, index) in selectUserList"
              :key="index"
            >
              <div class="user-avatar" @click="delectUser(index)">
                <span>{{ getLastTwoChars(item.nickName) }}</span>
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.nickName"
                placement="top"
              >
                <div class="name-span">{{ item.nickName }}</div>
              </el-tooltip>
            </div>
            <div class="default-addbtn" @click="userDialogVisible = true">
              <div class="user-avatar add-icon">
                <i class="el-icon-plus"></i>
              </div>
              <div class="name-span">添加人员</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="列席人员:" prop="attendance">
          <el-input
            v-model="form.attendance"
            placeholder="请填写列席人员"
          ></el-input>
        </el-form-item>
        <el-form-item label="会议内容:" prop="content">
          <el-input
            type="textarea"
            :rows="6"
            v-model="form.content"
            placeholder="请填写会议内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传附件:" prop="fileurl">
          <el-upload
            class="upload-demo"
            action
            ref="upload"
            :auto-upload="false"
            :on-change="handleChange"
            accept=".doc,.docx,.pdf"
          >
            <el-button size="medium" plain>上传附件</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
              style="color: rgba(0, 0, 0, 0.45); font-size: 14px"
            >
              支持扩展名：.doc .docx .pdf 大小200M以内
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="人员选择" :visible.sync="userDialogVisible" width="40%">
      <el-row>
        <el-col :span="12">
          <div style="border-right: 1px solid #e6e7eb">
            <el-tree
              :data="deptOptionss"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div
            style="height: 561px; overflow-y: scroll; padding-left: 24px"
          >
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedChange"
            >
              <el-checkbox
                class="checkbox"
                v-for="city in userList"
                :label="city.userId"
                :key="city.userId"
              >
                <div style="display: flex; align-items: center">
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      color: #333;
                      font-size: 12px;
                      line-height: 32px;
                      text-align: center;
                      border: 1px solid #ffe3e3;
                      background-color: rgba(255, 77, 79, 0.06);
                      border-radius: 50%;
                      margin-right: 12px;
                    "
                  >
                    <div>{{ getLastTwoChars(city.nickName) }}</div>
                    <!-- <img src="" alt="" /> -->
                  </div>
                  <div>{{ city.nickName }}</div>
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { listUser, deptTreeSelect } from "@/api/system/user";
import { getConfigList, uploadfile } from "@/api/setting";
import { parentlist } from "@/api/tissue";
import {
  getMeetingList,
  addMeeting,
  editMeeting,
  getUserMeetTypeList,
  uploadmeetingfile,
} from "@/api/conference";
import { pcaTextArr } from "element-china-area-data";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      title: "",
      loading: true,
      pcaTextArr,
      dialogVisible: false,
      userDialogVisible: false,
      list: [],
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      form: {
        id: null,
        title: "", //会议名称
        starttime: "", //开始时间
        durtion: "", //时长
        orgid: undefined, //组织id
        meetingtype: "", //会议类型
        meetingtopic: "", //会议议题
        meetingway: "", //会议形式
        detailway: "", //具体形式
        signway: "", //签到方式
        meetingaddr: "", //会议地点
        detailaddr: "", //详细地址
        users: "", //参会人员
        attendance: "", //列席人员
        content: "", //会议内容
        fileurl: "", //附件地址
        status: "", //会议状态
      },
      rules: {
        title: [{ required: true, message: "请填写会议名称", trigger: "blur" }],
        starttime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        durtion: [
          { required: true, message: "请填写会议时长", trigger: "blur" },
        ],
        orgid: [
          { required: true, message: "请选择发布组织", trigger: "change" },
        ],
        meetingtype: [
          { required: true, message: "请选择会议类型", trigger: "change" },
        ],
        meetingtopic: [
          { required: true, message: "请选择会议议题", trigger: "change" },
        ],
        meetingway: [
          { required: true, message: "请选择会议形式", trigger: "change" },
        ],
        signway: [
          { required: true, message: "请选择签到方式", trigger: "change" },
        ],
        detailaddr: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
        users: [
          { required: true, message: "请选择参与人员", trigger: "change" },
        ],
        content: [
          { required: true, message: "请填写会议内容", trigger: "blur" },
        ],
      },
      conferenceTypeList: [], //会议类型列表
      issueList: [], //会议议题列表
      checkTypeList: [], //
      checkIssueList: [],
      // 部门树选项
      deptOptions: undefined,
      deptOptionss: undefined,
      fileList: [], //文件列表
      selectedOptions: [],
      checkAll: false,
      checkedCities: [],
      isIndeterminate: true,
      queryParams: {
        deptId: undefined,
        pageNum: 1,
        pageSize: 100,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      userList: [], //用户列表
      selectOldUserList: [],
      selectUserList: [], //选中的用户
    };
  },
  methods: {
    //删除用户
    delectUser(index) {
      this.checkedCities.splice(index, 1);
      this.selectUserList.splice(index, 1);
      this.form.users = this.checkedCities.sort((a, b) => a - b).join(",");
    },
    //提交用户
    submitUser() {
      this.form.users = this.checkedCities.sort((a, b) => a - b).join(",");
      this.selectUserList = this.selectOldUserList;
      this.userDialogVisible = false;
    },
    getLastTwoChars(string) {
      if (string.length >= 2) {
        return string.slice(-2);
      } else {
        return string;
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getUserList();
    },
    handleCheckAllChange(val) {
      let cityOptions = [];
      this.userList.forEach((item) => {
        cityOptions.push(item.userId);
      });
      this.checkedCities = val ? cityOptions : [];
      this.selectOldUserList = this.userList.filter((item) =>
        this.checkedCities.includes(item.userId)
      );
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.userList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userList.length;

      this.selectOldUserList = this.userList.filter((item) =>
        value.includes(item.userId)
      );
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api = this.form.id
            ? editMeeting(this.form)
            : addMeeting(this.form);
          api.then((res) => {
            this.loading = true;
            this.form.id = null;
            this.cancelForm();
            this.$modal.msgSuccess(res.msg);
            this.dialogVisible = false;
            this.getList();
          });
        } else {
          return false;
        }
      });
    },
    handleItem(type, item) {
      if (type == 1) {
        this.title = "会议修改";
        this.$nextTick(() => {
          let {
            id,
            title,
            starttime,
            durtion,
            orgid,
            meetingway,
            detailway,
            signway,
            detailaddr,
            meetingtype,
            meetingtopic,
            meetingaddr,
            users,
            attendance,
            content,
            fileurl,
            status,
          } = item;
          this.form = {
            id,
            title,
            starttime,
            durtion,
            orgid,
            meetingway,
            detailway,
            signway,
            detailaddr,
            meetingtype,
            meetingtopic,
            meetingaddr,
            users,
            attendance,
            content,
            fileurl,
            status,
          };
        });

        this.checkTypeList = item.meetingtype
          .split(",")
          .map((em) => Number(em));
        this.checkIssueList = item.meetingtopic
          .split(",")
          .map((em) => Number(em));
        this.selectedOptions = item.meetingaddr.split("/");
        this.fileList = item.fileurl.split(",");
        this.checkedCities = item.users.split(",").map((em) => Number(em));

        this.selectUserList = this.userList.filter((em) =>
          this.checkedCities.includes(Number(em.userId))
        );
        this.dialogVisible = true;
      } else if (type == 2) {
      } else {
      }
    },
    handleChange({ raw }) {
      let data = new FormData();
      data.append("file", raw);
      data.append("flag", 'uploadMeetingFile');

      uploadmeetingfile(data).then((res) => {
        this.fileList.push(res.msg);
        this.form.fileurl = this.fileList.join(",");
      });
    },
    handleCheckedCitiesChange(e, name) {
      this.form[name] = e.join(",");
    },
    //选择地区
    changeArea(e) {
      this.form.meetingaddr = e.join("/");
    },
    cancelForm() {
      this.form.id = "";
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.$refs.upload.clearFiles();
      this.selectedOptions = [];
      this.checkTypeList = [];
      this.checkIssueList = [];
    },
    getTime(data, type) {
      if (data) {
        const [date, time] = data.split(" ");
        return type == 1 ? date : time;
      }
    },
    handleSizeChange(val) {
      this.loading = true;
      this.ruleForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.loading = true;
      this.ruleForm.pageNum = val;
      this.getList();
    },
    //获取列表
    getList() {
      getMeetingList(this.ruleForm).then((res) => {
        this.loading = false;
        this.list = res.data.list;
        this.ruleForm.total = res.data.total;
      });
    },
    //获取配置信息
    getConfigList() {
      getUserMeetTypeList().then((res) => {
        this.conferenceTypeList = res.data;
      });
      getConfigList({ configflag: "huiyiyiti" }).then((res) => {
        this.issueList = res.data;
      });
      parentlist().then((res) => {
        this.deptOptions = this.printAllNames(res.data);
      });

      deptTreeSelect().then((response) => {
        this.deptOptionss = response.data;
      });
    },
    getUserList() {
      listUser(this.addDateRange(this.queryParams, [])).then((response) => {
        this.userList = response.rows;
      });
    },
    printAllNames(data) {
      data = data.map((item) => {
        return item.childlist.length
          ? {
              id: item.id,
              label: item.name,
              children: this.printAllNames(item.childlist),
            }
          : {
              id: item.id,
              label: item.name,
            };
      });
      return data;
    },
  },
  created() {
    this.getList();
    this.getUserList();
    this.getConfigList();
  },
};
</script>
<style lang="scss" scoped>
.rightBtn {
  margin: 0 4px 0 12px;
}
::v-deep .el-tag.el-tag--success {
  color: #1890ff;
  background-color: #e6f7ff;
  border-color: #91d5ff;
}
::v-deep .el-upload-list__item-name {
  color: #ff4d4f;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
.person-select {
  display: flex;
  margin-top: 10px;
  .default-addbtn {
    cursor: pointer;
    .user-avatar {
      width: 44px;
      height: 44px;
      line-height: 44px;
      color: #333;
      font-size: 14px;
      border-radius: 50%;
      text-align: center;
      background-color: rgba(255, 77, 79, 0.06);
      border: 1px solid #ffe3e3;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }
    .add-icon {
      border: 1px solid #d1d1d1;
      background-color: #ffffff;
    }
    .name-span {
      width: 64px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      line-height: 20px;
      text-align: center;
    }
  }
}

.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>
